<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="resources/jquery/jquery-1.7.2.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
	*{
		margin:0;
		padding:0;
	}
	body{
		font-family: "Myriad Pro",Arial,sans-serif;
		background: #282828;
	}
	.overlay{
		position: fixed;
		top:0px;
		left:0px;
		width: 100%;
		height: 100%;
		background-color:#000;
		opacity:0.7;
		z-index: 999;
	}
	.modal{
		position: absolute;
		top:20%;
		width: 500px;
		height: 250px;
		background: #E8E8E8;
		color: #222;
		box-shadow:0px 0px 10px #000;
		border-radius:5px;
		text-shadow: 0 0 1px #333;
		border: 1px solid #303030;
		z-index: 9999;
		margin-left: -250px;
	}
	.modal h2{
		background-color: #111;
		color:#999;
		font-weight: normal;
		text-shadow: 0 0 1px #333;
		padding: 5px 0 5px 5px;
		margin: 5px;
		border-top-right-radius:5px;
		border-top-left-radius:5px;
	}
	a.next, a.prev{
		height: 40px;
		width: 20px;
		background-color: #E8E8E8;
		background-repeat: no-repeat;
		background-position: center center;
		cursor:pointer;
		border: 1px solid #303030;
		outline: none;
		position: absolute;
		top:100px;
	}
	a.next{
		right: -21px;
		border-left: none;
		background-image: url(resources/img/next.png);
		border-top-right-radius:5px;
		border-bottom-right-radius:5px; 
	}
	a.prev{
		left:-21px;
		border-right: none;
		background-image: url(resources/img/prev.png);
		border-top-left-radius:5px;
		border-bottom-left-radius:5px;
	}
	span.close{
		position: absolute;
		right: 12px;
		top:12px;
		cursor: pointer;
		height: 23px;
		width: 21px;
		background: #666;
		color: #000;
		border-radius:2px;
		text-align: center;
		opacity:0.5; 
	}
	span.cloas:hover{
		opacity:1.0;
	}
	.menu{
		width: 600px;
		height: 450px;
		margin: 50px auto 0 auto;
		background: #101010;
		border: 1px solid #191919;
		box-shadow:0 0 10px #000 inset;
	}
	.menu h2{
		color: #f0f0f0;
		font-size: 30px;
		font-weight: 100;
		text-shadow: 1px 1px 1px #000;
		padding: 20px;
	}
	ul.menulist{
		list-style: none;
	}
	ul.menulist li a{
		display: block;
		text-decoration: none;
		color: #ddd;
		background: #1f1f1f;
		font-size: 26px;
		text-shadow: 1px 1px 1px #000;
		padding: 10px 10px 10px 55px;
		margin: 5px 10px;
		box-shadow:0 0 10px #000;
		background-repeat: no-repeat;
		background-position: 5px 50%;
		opacity:0.9;
	}
	ul.menulist li a:hover{
		border: 1px solid #303030;
		background-color: #212121;
		opacity:1.0;
	}
	ul.menulist li.cbnu1 a{
		background-image: url(resources/img/cbnu1.jpg);
	}
	ul.menulist li.cbnu2 a{
		background-image: url(resources/img/cbnu2.jpg);
	}
	ul.menulist li.cbnu3 a{
		background-image: url(resources/img/cbnu3.jpg);
	}
	ul.menulist li.cbnu4 a{
		background-image: url(resources/img/cbnu4.jpg);
	}
	ul.menulist li.cbnu5 a{
		background-image: url(resources/img/cbnu5.jpg);
	}
	ul.menulist li.cbnu6 a{
		background-image: url(resources/img/cbnu6.jpg);
	}
	
	ul.menulist li a > span{
		color:#333;
		padding-left: 15px;
		font-size: 22px;
	}
	ul.menulist li a:hover > span{
		text-shadow: 1px 1px 1px #000;
		color:#444;
	}
	.modal h2 img{
		float: left;
		width: 28px;
		margin-right: 10px;
	}
</style>

</head>
<body>
<div id="overlay" class="overlay" style="display:none;">
</div>

<div id="modal" class="modal" style="display:none;">
	<a href="#" class="prev"></a>
	<a href="#" class="next"></a>
	<span class="close">x</span>
	<h2 id="title"></h2>
	<div id="content" class="loading"></div>
</div>

<div class="menu">
	<h2>MODAL IMAGES GALLERY</h2>
	<ul id="menulist" class="menulist">
		<li class="cbnu1">
		<a href="#"><em>CBNU1</em><span>http://newcbnu.chungbk.ac.kr</span></a>
		<p style="display:none;">
		CBNU1번
		</p>
		</li>
		<li class="cbnu2">
		<a href="#"><em>CBNU2</em><span>http://newcbnu.chungbk.ac.kr</span></a>
		<p style="display:none;">
		CBNU2번
		</p>
		</li>
		<li class="cbnu3">
		<a href="#"><em>CBNU3</em><span>http://newcbnu.chungbk.ac.kr</span></a>
		<p style="display:none;">
		CBNU3번
		</p>
		</li>
		<li class="cbnu4">
		<a href="#"><em>CBNU4</em><span>http://newcbnu.chungbk.ac.kr</span></a>
		<p style="display:none;">
		CBNU4번
		</p>
		</li>
		<li class="cbnu5">
		<a href="#"><em>CBNU5</em><span>http://newcbnu.chungbk.ac.kr</span></a>
		<p style="display:none;">
		CBNU5번
		</p>
		</li>
		<li class="cbnu6">
		<a href="#"><em>CBNU6</em><span>http://newcbnu.chungbk.ac.kr</span></a>
		<p style="display:none;">
		CBNU6번
		</p>
		</li>
	</ul>
	
</div>
<script type="text/javascript">
$(function(){

	var total	= $('#menulist').children().length;


	$('#menulist a').bind('click',function(e){
		var $this = $(this);
		var $el	= $this.parent();
		var source 	= $el.attr('class');
		current 	= $el.index() + 1;
		var $cbnu =  $(this).siblings("p")

		SHOW();
		$('#title').empty().html('<img src="resources/img/' + source + '.jpg"></img>' + $this.find('em').html());

		$('#content').empty().append($cbnu.html());
	});


	function SHOW(){
		$('#overlay').show();
		if(!$('#modal').is(':visible'))
			$('#modal').css('left','-260px').show().stop().animate({'left':'50%'}, 500);
	}



	$('#modal .close').bind('click',function(){
		HIDE();
	});

	function HIDE(){
		$('#modal').stop().animate({'left':'150%'}, 500, function(){
						$(this).hide();
						$('#overlay').hide();
						$('#content').empty();
				   });
	}


		$('#modal .next').bind('click',function(e){
		$('#menulist li:nth-child('+ parseInt(current+1) +')').find('a').trigger('click');
		e.preventDefault();
	});

		$('#modal .prev').bind('click',function(e){
		$('#menulist li:nth-child('+ parseInt(current-1) +')').find('a').trigger('click');
		e.preventDefault();
	});

});
</script>	

</body>
</html>